<script type="text/x-template" id="suit-reset">
  <div id="components-form-reset">
    <a-form :form="form" class="reset-form" @submit="handleSubmit">
      <a-form-item label="邮箱">
        <a-input
          v-decorator="[
            'email',
            {
              rules: [{ required: true, message: 'Email is required!' }],
            },
          ]"
          type="email"
          placeholder="Please insert your email"
        >
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" class="reset-form-button" html-type="submit">
          Submit
        </a-button>
        Or Already remember ?
        <a href="{% url 'accounts:login' %}">
          login now!
        </a>
      </a-form-item>
    </a-form>
  </div>
</script>

<script type="application/javascript">
  Vue.component('suit-reset', {
    delimiters: ['<%', '%>'],
    template: '#suit-reset',
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: 'reset_form' });
    },
    methods: {
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            const form = new FormData();
            form.append('email', values.email);
            axios({
              url: "{% url 'accounts:reset' %}",
              method: "POST",
              data: form,
              headers: {
                'content-type': `multipart/form-data; boundary=${form._boundary}`,
              },
            }).then(response => {
              const {code, data} = response.data;
              if (code === "00000000") {
                Bus.$emit('notification', 'info', "200", data.notice);
              }
            }).catch(error => {
              const {meta, data} = error.response.data;
              Bus.$emit('notification', 'error', meta.code, meta.details);
            });
          }
        });
      },
    },
  });
</script>